<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Local Wallet</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8"/>
	<link type="text/css" rel="stylesheet" href="css/reset.css" />
	<link type="text/css" rel="stylesheet" href="css/stats.css" />
	<link type="text/css" rel="stylesheet" href="css/jquery-ui/hot-sneaks/jquery-ui-1.8.11.custom.css" />
	<link type="text/css" rel="stylesheet" href="css/jquery-ui-override.css" />
	<link type="text/css" rel="stylesheet" href="css/dhtmlxchart.css" />
	<script type="text/javascript" src="script/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="script/jstorage.js"></script>
	<script type="text/javascript" src="script/jquery-jtemplates.js"></script>
	<script type="text/javascript" src="script/jquery.custom.selectors.js"></script>
</head>
<body>
<div id="wrapper">
	<div id="wrap">
		<div id="container" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
			<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
				<li class="ui-state-default ui-corner-top">
					<a href="index.html"><span>Home</span></a>
				</li>
				<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
					<a href="javascript:void()"><span>Statistics</span></a>
				</li>
			</ul>
			<div id="tab1" class="clearfix ui-tabs-panel ui-widget-content ui-corner-bottom">
				<div id="chartControls">
					<div id="chartControlsPlaceHolder">
					</div>
				</div> <!-- End Chart Controls -->
				<div id="chartPlaceHolder">
					
				</div> <!-- End Chart Place Holder -->
			</div> <!-- End Tab1 -->
		</div> <!-- End Container -->
	</div> <!-- End Wrap -->
</div> <!-- End Wrapper -->
<div id="dataPlaceHolder" style="display:none"></div>
<script type="text/javascript" src="script/common.behaviour.js"></script>
<script type="text/javascript" src="script/highcharts.js"></script>
<!--script type="text/javascript" src="script/dhtmlxchart.js"></script-->
<script type="text/javascript" src="script/custom.chart.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	// data access layer
	$.getScript('script/dao.commons.js', function(){
		// templating engine using jTemplates
		$.getScript('script/json.commons.js', function(){
			
			$.lwData = getData() || $.lwData;
			
			$('#chartControlsPlaceHolder').setTemplateURL('template/tmpl-chart-controls.html');
			$('#chartControlsPlaceHolder').processTemplate();		
			
			$.getScript('script/jquery-ui-1.8.11.custom.min.js', function(){
				var dates = $( "#fromDateField, #toDateField" ).datepicker({
					defaultDate: "+1w",
					//changeMonth: true,
					numberOfMonths: 3,
					dateFormat: "dd-mm-yy",
					onSelect: function( selectedDate ) {
						var option = this.id == "fromDateField" ? "minDate" : "maxDate",
							instance = $( this ).data( "datepicker" );
							date = $.datepicker.parseDate(
								instance.settings.dateFormat ||
								$.datepicker._defaults.dateFormat,
								selectedDate, instance.settings );
						dates.not( this ).datepicker( "option", option, date );
					}
				});
			});
				
			$('#categoriesPlaceHolder').html(function(){
				var buttons = '';
				$.each(commons.categories, function(index, value){
					buttons += '<h2 title="Select All ' + index + 's">'+ index + '</h2>';
					$.each(value, function(index, value){
						img = '<img src="images/icons/' + value.icon + '" title="' + value.name +'" />';
						buttons += '<a href="javascript:void()" class="lw-toggle-btn" data-category="' + value.id + '">' + img + '<span>' + value.name + '</span></a>';
					});
					buttons += '<hr/>'
				});
				return buttons;
			});
			
			$('.lw-toggle-btn').toggle(
				function(){
					$(this).toggleClass('pressed');
				}, function() {
					$(this).toggleClass('pressed');
				}
			);
			
			// generate button event handler
			$('#generateButton').click(function(){
				var selectors = buildCustomSelectors();
				var buttonMap = $('.lw-toggle-btn.pressed').getButtonsMap();
				$(selectors[0]).not(selectors[1]).each(function(){
					var $this = $(this);
					if(buttonMap[$this.attr('data-value')] || buttonMap[$this.attr('data-value')] == 0) {
						buttonMap[$this.attr('data-value')] += parseFloat($this.attr('data-amount'), 10);
					}
				});
				// reset chart place holder content
				//$('#chartPlaceHolder').html('').attr('class', '');
				$.showHighCharts($.highChartsAdapter(buttonMap));
			});
			
			$('#categoriesPlaceHolder h2').click(function(){
				$(this).nextUntil('br').click();
			});
			
			$.fn.extend({
				getButtonsMap: function() {
					var categories = {};
					this.each(function(){
						var $this = $(this);
						categories[$this.attr('data-category')] = 0;
					});
					return categories;
				}
			});
			
			function buildCustomSelectors() {
				
				// regular selector
				var $selector = '';
				
				// negative selector
				var $nSelector = '';
				
				// getting date
				$selector += ':dateRange(' + getDate($('#fromDateField').val()) + ', ' + getDate($('#toDateField').val()) + ')';
				
				// getting amount
				var fromVal = parseInt($('#fromAmountField').val(), 10);
				var toVal = parseInt($('#toAmountField').val(), 10);
				//if(!isNaN(fromVal) && !isNaN(toVal)) {
				var amountMin = isNaN(fromVal) ? Number.NEGATIVE_INFINITY : fromVal;
				var amountMax = isNaN(toVal) ? Number.POSITIVE_INFINITY : toVal; 
				$selector += ':amountRange(' + amountMin + ', ' + amountMax + ')';
				//}
				
				// getting categories
				$('#categoriesPlaceHolder .lw-toggle-btn').not('.pressed').each(function(index, value){
					$nSelector += ':category(' + $(this).attr('data-category') + '),';
				});
				return [$selector, $nSelector];
			}
			
			//var inner = $.createTemplateURL('template/tmpl-controls.html');
			$('#dataPlaceHolder').setTemplateURL('template/tmpl-plain-records.html');
			$('#dataPlaceHolder').processTemplate($.lwData);
			
			// call chart
			
			
		}); // end of get json commons
	}); // end of get dao commons
}); // end of document ready
</script>
</body>
</html>	